{% extends 'base.html' %}

{% block title %}校区管理 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}校区管理{% endblock %}

{% block extra_css %}
<style>
    .search-card {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }

    .campus-card {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        margin-bottom: 1.5rem;
        border-left: 4px solid #007bff;
    }

    .campus-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .campus-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .campus-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #2c3e50;
        margin: 0;
    }

    .campus-status {
        padding: 0.25rem 0.75rem;
        border-radius: 15px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .status-active {
        background: #d4edda;
        color: #155724;
    }

    .status-inactive {
        background: #f8d7da;
        color: #721c24;
    }

    .campus-info {
        margin-bottom: 1rem;
    }

    .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
        color: #6c757d;
    }

    .info-item i {
        width: 20px;
        margin-right: 0.5rem;
        color: #007bff;
    }

    .campus-actions {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        border-radius: 6px;
    }

    .table-responsive {
        background: white;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .table th {
        background: #f8f9fa;
        border: none;
        color: #495057;
        font-weight: 600;
        padding: 1rem;
    }

    .table td {
        border: none;
        padding: 1rem;
        vertical-align: middle;
    }

    .table tbody tr {
        border-bottom: 1px solid #f8f9fa;
    }

    .table tbody tr:hover {
        background: #f8f9fa;
    }

    .batch-actions {
        background: white;
        border-radius: 15px;
        padding: 1rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
        display: none;
    }

    .batch-actions.show {
        display: block;
    }

    .photo-preview {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 8px;
    }

    .no-photo {
        width: 60px;
        height: 60px;
        background: #f8f9fa;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6c757d;
    }

    @media (max-width: 768px) {
        .campus-header {
            flex-direction: column;
            gap: 1rem;
        }

        .campus-actions {
            width: 100%;
            justify-content: stretch;
        }

        .campus-actions .btn {
            flex: 1;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 搜索筛选 -->
    <div class="search-card">
        <form method="GET" action="{{ url_for('campus.list') }}">
            <div class="row g-3">
                <div class="col-md-3">
                    {{ form.keyword.label(class="form-label") }}
                    {{ form.keyword(class="form-control") }}
                </div>
                <div class="col-md-2">
                    {{ form.status.label(class="form-label") }}
                    {{ form.status(class="form-select") }}
                </div>
                <div class="col-md-2">
                    {{ form.has_admin.label(class="form-label") }}
                    {{ form.has_admin(class="form-select") }}
                </div>
                <div class="col-md-2">
                    {{ form.sort_by.label(class="form-label") }}
                    {{ form.sort_by(class="form-select") }}
                </div>
                <div class="col-md-3 d-flex align-items-end gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search me-1"></i>搜索
                    </button>
                    <a href="{{ url_for('campus.list') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-clockwise me-1"></i>重置
                    </a>
                    {% if current_user.is_super_admin() %}
                    <a href="{{ url_for('campus.create') }}" class="btn btn-success">
                        <i class="bi bi-plus-circle me-1"></i>新建校区
                    </a>
                    {% endif %}
                </div>
            </div>
        </form>
    </div>

    <!-- 批量操作 -->
    {% if current_user.is_super_admin() %}
    <div class="batch-actions" id="batchActions">
        <form method="POST" action="{{ url_for('campus.batch_operation') }}" id="batchForm">
            <div class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label">已选择 <span id="selectedCount">0</span> 个校区</label>
                    <input type="hidden" name="campus_ids" id="campusIds">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                </div>
                <div class="col-md-3">
                    <label class="form-label">批量操作</label>
                    <select name="action" class="form-select" required>
                        <option value="">请选择操作</option>
                        <option value="activate">启用</option>
                        <option value="deactivate">禁用</option>
                        <option value="delete">删除</option>
                    </select>
                </div>
                <div class="col-md-5">
                    <button type="submit" class="btn btn-warning me-2" onclick="return confirmBatch()">
                        <i class="bi bi-check-circle me-1"></i>执行操作
                    </button>
                    <button type="button" class="btn btn-outline-secondary" onclick="clearSelection()">
                        <i class="bi bi-x-circle me-1"></i>取消选择
                    </button>
                </div>
            </div>
        </form>
    </div>
    {% endif %}

    <!-- 校区列表 -->
    <div class="row">
        <div class="col-12">
            {% if campuses %}
                <!-- 统计信息 -->
                <div class="row mb-3">
                    <div class="col-12">
                        <small class="text-muted">
                            找到 {{ total }} 个校区，当前显示第 {{ pagination.page }} 页，共 {{ pagination.pages }} 页
                        </small>
                    </div>
                </div>

                <!-- 桌面端表格视图 -->
                <div class="d-none d-lg-block">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    {% if current_user.is_super_admin() %}
                                    <th width="50">
                                        <input type="checkbox" class="form-check-input" id="selectAll">
                                    </th>
                                    {% endif %}
                                    <th width="80">照片</th>
                                    <th>校区信息</th>
                                    <th width="120">管理员</th>
                                    <th width="100">容量</th>
                                    <th width="80">状态</th>
                                    <th width="200">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for campus in campuses %}
                                <tr>
                                    {% if current_user.is_super_admin() %}
                                    <td>
                                        <input type="checkbox" class="form-check-input campus-checkbox"
                                               value="{{ campus.id }}">
                                    </td>
                                    {% endif %}
                                    <td>
                                        {% if campus.photo_url %}
                                            <img src="{{ campus.photo_url }}" alt="{{ campus.name }}"
                                                 class="photo-preview">
                                        {% else %}
                                            <div class="no-photo">
                                                <i class="bi bi-building"></i>
                                            </div>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div>
                                            <strong>{{ campus.name }}</strong>
                                            <small class="d-block text-muted">
                                                <i class="bi bi-geo-alt me-1"></i>{{ campus.address }}
                                            </small>
                                            <small class="d-block text-muted">
                                                <i class="bi bi-telephone me-1"></i>{{ campus.phone }}
                                            </small>
                                        </div>
                                    </td>
                                    <td>
                                        {% if campus.admin_id %}
                                            {% set admin = admins_dict[campus.admin_id] if admins_dict and campus.admin_id in admins_dict else None %}
                                            {% if admin %}
                                                {{ admin.real_name }}
                                            {% else %}
                                                管理员ID：{{ campus.admin_id }}
                                            {% endif %}
                                        {% else %}
                                            <span class="text-muted">未分配</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ campus.capacity }}人</td>
                                    <td>
                                        <span class="campus-status status-{{ campus.status }}">
                                            {% if campus.status == 'active' %}正常
                                            {% elif campus.status == 'inactive' %}禁用
                                            {% else %}{{ campus.status }}
                                            {% endif %}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <a href="{{ url_for('campus.detail', id=campus.id) }}"
                                               class="btn btn-outline-primary" title="查看详情">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            {% if current_user.is_super_admin() %}
                                            <a href="{{ url_for('campus.edit', id=campus.id) }}"
                                               class="btn btn-outline-warning" title="编辑">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <a href="{{ url_for('campus.delete', id=campus.id) }}"
                                               class="btn btn-outline-danger" title="删除"
                                               onclick="return confirm('确定要删除此校区吗？')">
                                                <i class="bi bi-trash"></i>
                                            </a>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 移动端卡片视图 -->
                <div class="d-lg-none">
                    {% for campus in campuses %}
                    <div class="campus-card">
                        <div class="campus-header">
                            <div>
                                <h5 class="campus-title">{{ campus.name }}</h5>
                                <span class="campus-status status-{{ campus.status }}">
                                    {% if campus.status == 'active' %}正常
                                    {% elif campus.status == 'inactive' %}禁用
                                    {% else %}{{ campus.status }}
                                    {% endif %}
                                </span>
                            </div>
                            {% if current_user.is_super_admin() %}
                            <input type="checkbox" class="form-check-input campus-checkbox"
                                   value="{{ campus.id }}">
                            {% endif %}
                        </div>

                        <div class="campus-info">
                            <div class="info-item">
                                <i class="bi bi-geo-alt"></i>
                                <span>{{ campus.address }}</span>
                            </div>
                            <div class="info-item">
                                <i class="bi bi-telephone"></i>
                                <span>{{ campus.phone }}</span>
                            </div>
                            <div class="info-item">
                                <i class="bi bi-person-check"></i>
                                <span>
                                    {% if campus.admin %}
                                        {{ campus.admin.real_name }}
                                    {% else %}
                                        未分配管理员
                                    {% endif %}
                                </span>
                            </div>
                            <div class="info-item">
                                <i class="bi bi-people"></i>
                                <span>容量：{{ campus.capacity }}人</span>
                            </div>
                        </div>

                        <div class="campus-actions">
                            <a href="{{ url_for('campus.detail', id=campus.id) }}"
                               class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-eye me-1"></i>查看详情
                            </a>
                            {% if current_user.is_super_admin() %}
                            <a href="{{ url_for('campus.edit', id=campus.id) }}"
                               class="btn btn-outline-warning btn-sm">
                                <i class="bi bi-pencil me-1"></i>编辑
                            </a>
                            <a href="{{ url_for('campus.delete', id=campus.id) }}"
                               class="btn btn-outline-danger btn-sm"
                               onclick="return confirm('确定要删除此校区吗？')">
                                <i class="bi bi-trash me-1"></i>删除
                            </a>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>

                <!-- 分页 -->
                {% if pagination.pages > 1 %}
                <nav aria-label="校区列表分页">
                    <ul class="pagination justify-content-center">
                        {% if pagination.has_prev %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('campus.list', page=pagination.prev_num,
                                keyword=form.keyword.data, status=form.status.data,
                                has_admin=form.has_admin.data, sort_by=form.sort_by.data) }}">
                                <i class="bi bi-chevron-left"></i>
                            </a>
                        </li>
                        {% endif %}

                        {% for page_num in pagination.iter_pages() %}
                            {% if page_num %}
                                {% if page_num != pagination.page %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('campus.list', page=page_num,
                                        keyword=form.keyword.data, status=form.status.data,
                                        has_admin=form.has_admin.data, sort_by=form.sort_by.data) }}">
                                        {{ page_num }}
                                    </a>
                                </li>
                                {% else %}
                                <li class="page-item active">
                                    <span class="page-link">{{ page_num }}</span>
                                </li>
                                {% endif %}
                            {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">…</span>
                            </li>
                            {% endif %}
                        {% endfor %}

                        {% if pagination.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('campus.list', page=pagination.next_num,
                                keyword=form.keyword.data, status=form.status.data,
                                has_admin=form.has_admin.data, sort_by=form.sort_by.data) }}">
                                <i class="bi bi-chevron-right"></i>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}

            {% else %}
                <!-- 空状态 -->
                <div class="text-center py-5">
                    <div class="mb-4">
                        <i class="bi bi-building" style="font-size: 4rem; color: #dee2e6;"></i>
                    </div>
                    <h5 class="text-muted">暂无校区数据</h5>
                    <p class="text-muted">
                        {% if form.keyword.data or form.status.data or form.has_admin.data %}
                        没有找到符合条件的校区，请尝试调整搜索条件
                        {% else %}
                        系统中还没有任何校区信息
                        {% endif %}
                    </p>
                    {% if current_user.is_super_admin() %}
                    <a href="{{ url_for('campus.create') }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-2"></i>创建第一个校区
                    </a>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 全选/反选功能
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.campus-checkbox');
    const batchActions = document.getElementById('batchActions');
    const selectedCount = document.getElementById('selectedCount');
    const campusIds = document.getElementById('campusIds');

    if (selectAll) {
        selectAll.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            updateBatchActions();
        });
    }

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateBatchActions);
    });

    function updateBatchActions() {
        const selected = Array.from(checkboxes).filter(cb => cb.checked);
        const count = selected.length;

        if (count > 0) {
            batchActions.classList.add('show');
            selectedCount.textContent = count;
            campusIds.value = selected.map(cb => cb.value).join(',');
        } else {
            batchActions.classList.remove('show');
            selectedCount.textContent = '0';
            campusIds.value = '';
        }

        // 更新全选状态
        if (selectAll) {
            selectAll.checked = count === checkboxes.length;
            selectAll.indeterminate = count > 0 && count < checkboxes.length;
        }
    }

    // 清除选择
    window.clearSelection = function() {
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
        if (selectAll) {
            selectAll.checked = false;
            selectAll.indeterminate = false;
        }
        updateBatchActions();
    };

    // 批量操作确认
    window.confirmBatch = function() {
        const action = document.querySelector('select[name="action"]').value;
        const count = document.querySelectorAll('.campus-checkbox:checked').length;

        if (!action) {
            alert('请选择要执行的操作');
            return false;
        }

        const actionText = {
            'activate': '启用',
            'deactivate': '禁用',
            'delete': '删除'
        }[action];

        return confirm(`确定要${actionText} ${count} 个校区吗？此操作不可撤销。`);
    };
});
</script>
{% endblock %}